<template>
    <div class="share_icon">


        <ShareNetwork network="facebook" url="https://news.vuejs.org/issues/180"
            title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
            description="This week, I’d like to introduce you to 'Vite', which means 'Fast'. It’s a brand new development setup created by Evan You."
            quote="The hot reload is so fast it\'s near instant. - Evan You" hashtags="vuejs,vite">
            <SvgIcon name="link2" />
        </ShareNetwork>

        <!-- <SvgIcon name="ig" /> -->

        <ShareNetwork network="WhatsApp" url="https://news.vuejs.org/issues/180"
            title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
            description="This week, I’d like to introduce you to 'Vite', which means 'Fast'. It’s a brand new development setup created by Evan You."
            quote="The hot reload is so fast it\'s near instant. - Evan You" hashtags="vuejs,vite">
            <SvgIcon name="link3" />
        </ShareNetwork>


        <SvgIcon name="link4" @click="handeOpenShare" />

        <SvgIcon name="link" @click="nativeShareFun" />


    </div>
</template>

<script>
import { defineComponent, ref, reactive, nextTick, onMounted, toRaw, toRefs, watch, computed } from 'vue'
import NativeShare from 'nativeshare'
export default defineComponent({

    setup() {
        console.log(NativeShare)
        var nativeShare = new NativeShare({
            wechatConfig: {
                appId: '',
                timestamp: '',
                nonceStr: '',
                signature: '',
            },
            // 让你修改的分享的文案同步到标签里，比如title文案会同步到<title>标签中
            // 这样可以让一些不支持分享的浏览器也能修改部分文案，默认都不会同步
            syncDescToTag: false,
            syncIconToTag: false,
            syncTitleToTag: false,
        })

        const handeOpenShare = () => {
            console.log(1111)
            // 设置分享文案
            nativeShare.setShareData({
                icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
                link: 'https://github.com/fa-ge/NativeShare',
                title: 'NativeShare',
                desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
                from: '@fa-ge',
            })
            // 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。类似setShareData)
            try {
                nativeShare.call(command = 'wechatTimeline')
                // 如果是分享到微信则需要 nativeShare.call('wechatFriend')
                // 类似的命令下面有介绍
            } catch (err) {
                // 如果不支持，你可以在这里做降级处理
            }
        }
        const nativeShareFun = () => {
            var nativeShare = new NativeShare()
            console.log('----------', nativeShare)
            var shareData = {
                title: 'i+',
                desc: '诚邀您！',
                icon: 'https://www.baidu.com/M.png',
                link: 'this.shareUrlLink',
                // 不要过于依赖以下两个回调，很多浏览器是不支持的
                success: function success() {
                    console.log('--success---')
                },
                fail: function fail() {
                    console.log('--fail---')
                }
            }
            console.log('-----调起分享link数据',)
            nativeShare.setShareData(shareData)
            try {
                console.log('准备进入call方法')
                nativeShare.call()
                console.log('调起call')
            } catch (err) {
                // 如果不支持，你可以在这里做降级处理
                alert("当前游览器不支持");
                shareUrl()
                console.log('未成功调起call')
            }

        }
        // 未调起微信分享面板，则进行链接复制，然后唤醒微信
        const copy_url = (value)=> {
            var textarea = document.createElement('textarea')
            var currentFocus = document.activeElement
            document.body.appendChild(textarea)
            textarea.value = value
            textarea.focus()
            if (textarea.setSelectionRange) {
                textarea.setSelectionRange(0, textarea.value.length)
            } else {
                textarea.select()
            }
            try {
                var state = document.execCommand('copy')
            } catch (err) {
                state = false
            }
            document.body.removeChild(textarea)
            currentFocus.focus() //大佬原版存在聚焦方法，不知其意，注之仍行
            alert(state ? '链接复制成功' : '链接复制失败')
            // if (state) return this.$toast('复制成功!')
        }
        const shareUrl=() =>{
            copy_url('this.shareUrlLink')
            try {
                window.top.location.replace('weixin://') // 唤醒微信
            } catch (err) {
                // 如果不支持，你可以在这里做降级处理
                alert('您的浏览器不支持该分享功能，请手动复制链接!')
            }
        }
        return {
            handeOpenShare,
            nativeShareFun
        }
    }
})
</script>
<style scoped lang='scss'>
.share_icon {
    svg {
        margin-right: 8px;
    }
}
</style>
